import React from 'react';

import MUtil from 'util/mm.jsx';
import User from 'service/user-service.jsx';
import './index.scss';

const __mm = new MUtil();
const __user = new User();

class Login extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      username: '',
      password: '',
      redirect: __mm.getUrlParam('redirect') || '/'
    }
  }
  
  // 改变 Login 中的 title
  componentWillMount(){
    document.title = '登录 - MMALL ADMIN';
  }

  // 当用户名或者密码发生改变
  onInputChange(e){
    let inputValue = e.target.value;
    let inputName = e.target.name;
    this.setState({
      [inputName]: inputValue
    })
  }

  onInputKeyup(e){
    if(e.keyCode == 13){
      this.onSubmit();
    }
  }

  // 当用户提交表单
  onSubmit(){
    let loginInfo = {
      username: this.state.username,
      password: this.state.password
    }
    let checkResult = __user.checkLoginInfo(loginInfo)
    // 验证信息通过
    if(checkResult.status){
      __user.login(loginInfo).then((res) => {
        __mm.setStorage('userInfo', res);
        // console.log(this.state.redirect);
        // 第一个then：成功就跳回原来的页面, 比如我们从商品页面跳过来，我们就应该跳回到商品页面
        // 第二个then：错误就输出
        // this.props.history.push(): 这是 React Router 的重定向跳转，只有用 React Router 渲染的组件才会有 history 这个方法，不然就需要用 React Router 中其他方法来实现重定向
        this.props.history.push(this.state.redirect);
      }, (errMsg) => {
        __mm.errorTips(errMsg);
      })
    }
    // 验证信息不通过
    else{
      __mm.errorTips(checkResult.msg)
    }

  }

  render() {
    return (
        <div className="col-md-4  col-md-offset-4">
          <div className="panel panel-default login-panel">
            <div className="panel-heading">欢迎登陆 - MMALL管理系统</div>
            <div className="panel-body">
              <div>
                <div className="form-group">
                  <input
                    type="text"
                    name="username"
                    className="form-control"
                    placeholder="请输入用户名"
                    onKeyUp={ e => this.onInputKeyup(e)}
                    onChange={ e => this.onInputChange(e)}
                  />
                </div>
                <div className="form-group">
                  <input
                    type="password"
                    name="password"
                    className="form-control"
                    placeholder="请输入密码"
                    onKeyUp={ e => this.onInputKeyup(e)}
                    onChange={ e => this.onInputChange(e)}
                  />
                </div>
                <button
                  className="btn btn-lg btn-primary btn-block"
                  onClick={ e => {this.onSubmit()}}
                >
                  登录
                </button>
              </div>
            </div>
          </div>
        </div>
    );
  }
}

// 暴露组件
// 因为只有一个 className Home，所以用 default
export default Login;